<template>
  <div class="outbound">
    <div class="footerButton scroll-wrapper" ref="tabScroll">
      <tab
        class="device-manege-tab"
        active-color="#456de6"
        default-color="#fff"
        custom-bar-width="90%"
      >
        <tab-item
          @on-item-click="toStatusDevice(item)"
          :selected="runStatus === item.key"
          v-for="item in tabNav"
          :key="item.key"
        >
          <div class="tab-item">
            <span>
              {{ item.num }}
            </span>
            <span>
              {{ item.value }}
            </span>
          </div>
        </tab-item>
      </tab>
    </div>
    <div class="outbound-work">
      <div class="outbound-work-wrapper">
        <div
          class="desc_box"
          v-for="(listItemData, listItemIndex) in tableData"
          :key="listItemIndex"
          @click="eventNext(listItemData)"
        >
          <div class="item_title">
            <span class="title-label">
              <template v-if="!listItemData.deviceId">
                部门
              </template>
              <template v-if="listItemData.deviceId">
                设备
              </template>
            </span>
            <span class="title-text" style="position: relative">
              <template v-if="!listItemData.deviceId">
                {{ listItemData.departmentName }}
              </template>
              <template v-if="listItemData.deviceId">
                {{ listItemData.deviceName }}
                <span style="position: absolute;right: 0" v-if="!listItemData.isFollow"><x-icon type="ios-star-outline" size="30" @click.stop="doFollow(listItemData)"></x-icon></span>
                <span style="position: absolute;right: 0" v-else><x-icon type="ios-star" size="30" @click.stop="disFollow(listItemData)"></x-icon></span>
              </template>
            </span>
            <span class="title-tip" style="text-align: right;">
              <template v-if="!listItemData.deviceId">
                {{ runStatusText }}数量：{{ listItemData.deviceRecordDoneNum }}
              </template>
            </span>
          </div>
          <template v-if="listItemData.deviceId">
            <div class="item-body">
              <span class="item-body-text"
                >设备编码：{{ listItemData.code }}
              </span>
            </div>
            <div class="item-body">
              <div class="item-status">
                <span class="device-status">
                  <span class="device-tag" :class="'status' + listItemData.run">
                  </span>
                  {{ deviceStatus[listItemData.run] }}：
                </span>
                <span>
                  {{
                    listItemData.deviceStatusTime
                      ? listItemData.deviceStatusTime + "h"
                      : ""
                  }}
                </span>
              </div>
            </div>
          </template>
          <div class="item-body" v-else-if="!listItemData.deviceId">
            <span> </span>
            <span> </span>
            <span
              class="item-show"
              @click.stop="eventpartListShow(listItemData, listItemIndex)"
            >
              <template v-if="showIndex === listItemIndex && show">
                <span>收起</span>
              </template>
              <template v-else>
                <span>展开</span>
              </template>
            </span>
          </div>
          <template v-if="showIndex === listItemIndex && show">
            <div
              class="item-chlid"
              v-for="(item, index) in listItemData.partList"
              :key="item.id + index"
              @click.stop="eventChlid(item)"
            >
              <div class="child-title" style="position: relative">
                <span class="child-label">
                  设备
                </span>
                <span class="child-title-text">{{ item.deviceName }}</span>
                <span style="position: absolute;right: 0;" v-if="!item.isFollow"><x-icon type="ios-star-outline" size="30" @click.stop="doFollow(item)"></x-icon></span>
                <span style="position: absolute;right: 0;" v-else><x-icon type="ios-star" size="30" @click.stop="disFollow(item)"></x-icon></span>
              </div>
              <div class="child-body">
                <div class="child-body-text">设备编码：{{ item.code }}</div>
              </div>
              <div class="child-body">
                <span class="device-status">
                  <span class="device-tag" :class="'status' + item.run"> </span>
                  {{ deviceStatus[item.run] }}：
                </span>
                <span>
                  {{ item.deviceStatusTime ? item.deviceStatusTime + "h" : "" }}
                </span>
              </div>
            </div>
          </template>
          <div
            class="newpage_work_more"
            v-if="showDeviceMore && show && showIndex === listItemIndex"
            @click.stop="getDeviceMore(listItemData)"
          >
            查看更多
          </div>
        </div>

        <div class="newpage_work_more" v-if="showMore" @click.stop="getMore">
          查看更多
        </div>
        <div v-if="!tableData.length" class="not-content">
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
      </div>
    </div>
    <toast v-model="doFollowToast" type="text" :time="800" is-show-mask text="关注成功" ></toast>
    <toast v-model="disFollowToast" type="text" :time="800" is-show-mask text="取消成功" ></toast>
  </div>
</template>
<script>
import { Tab, TabItem, Toast} from "vux";
import iuCard from "@/components/common/card/index";
import DeviceDao from "@/daos/device_dao";
import depTree from "@/components/common/tree";
export default {
  name: "deviceList",
  components: {
    depTree,
    iuCard,
    Tab,
    TabItem,
    Toast
  },
  data() {
    return {
      doFollowToast: false,
      disFollowToast: false,
      showIndex: 1,
      showMore: false,
      showDeviceMore: false,
      show: false,
      tableData: [],
      partList: [],
      runStatus: 2,
      isLastLevel: false,
      isTopLevel: false,
      deviceStatus: ["全部", "未监控", "运转", "停止", "故障", "离线"],
      runStatusText: "运行设备",
      tabNav: [
        {
          key: 0,
          value: "我的关注",
          num: 0,
        },
        {
          key: 2,
          value: "运行设备",
          num: 0
        },
        {
          key: 3,
          value: "停止设备",
          num: 0
        },
        {
          key: 4,
          value: "故障设备",
          num: 0
        },
        {
          key: 5,
          value: "离线设备",
          num: 0
        },
        {
          key: 1,
          value: "未监控设备",
          num: 0
        },
        {
          key: "",
          value: "全部设备",
          num: 0
        }
      ],
      pageSize: 10,
      pageNum: 1,
      childPageSize: 10,
      childPageNum: 1
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  props: {
    curDepartment: {
      type: Object,
      default: () => {
        return {};
      }
    },
    navIndex: Number
  },
  watch: {
    curDepartment: {
      deep: true,
      immediate: true,
      handler: function(newValue, oldValue) {
        if (oldValue && newValue.id == oldValue.id) {
          return;
        }
        if (this.navIndex === 0) {
          this.init();
        }
      }
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  created() {},
  methods: {
    doFollow(item){
      item.isFollow = true
      if (this.$vux) {
        this.$vux.loading.show();
      }
      DeviceDao.doFollow(item.deviceId)
      this.doFollowToast = true
      if (this.$vux) {
        this.$vux.loading.hide();
      }
    },
    disFollow(item) {
      item.isFollow = false
      if (this.$vux) {
        this.$vux.loading.show();
      }
      DeviceDao.disFollow(item.deviceId)
      if (this.$vux) {
        this.$vux.loading.hide();
      }
      this.disFollowToast = true
    },
    init() {
      if (!this.user) {
        this.getUser();
      } else {
        this.getDeviceListMore();
        this.getDeviceNum();
      }
    },
    getUser() {
      this.$http(this.$API.getUserInfo, {})
        .then(res => {
          if (res) {
            this.$store.commit("saveUser", res);
            this.init();
          }
        })
        .catch(e => {});
    },
    back() {
      this.$router.go(-1);
    },
    toStatusDevice(item) {
      this.runStatus = item.key;
      this.runStatusText = item.value;
      this.pageNum = 1;
      this.show = false;
      this.getDeviceNum();
      this.getDeviceListMore();
    },
    getMore(item) {
      this.pageNum++;
      this.getDeviceListDetailByDep(item);
    },
    getDeviceMore(item) {
      this.childPageNum++;
      this.getDeviceListByDep(item);
    },
    getDeviceListMore() {
      if (!this.curDepartment || !this.curDepartment.id) {
        return;
      }
      if (this.user) {
        let node = this.treeFind(
          this.user.serviceAreaTree.children,
          e => e.id === this.curDepartment.id
        );
        this.isLastLevel = node && !node.children.length;
        this.isTopLevel = this.curDepartment.id == this.user.serviceAreaTree.id;
      }

      if (this.pageNum === 1) {
        this.tableData.splice(0);
      }
      if (this.$vux) {
        this.$vux.loading.show();
      }
      this.getDeviceDepList();
      // this.getDeviceListDetailByDep();
    },
    getDeviceDepList() {
      if (this.isLastLevel) {
        // this.getDeviceListByDep(this.curDepartment);
        this.getDeviceListDetailByDep();
        return;
      }
      DeviceDao.getDeviceDepList(
        {
          // orgId: this.user.org.id,
          runStatus: this.runStatus,
          departmentId: this.curDepartment.id
        },
        res => {
          if (this.pageNum === 1) {
            this.tableData.splice(0);
          }
          if (res && res.length) {
            this.tableData.push(...res);
          }

          if (this.$vux) {
            this.$vux.loading.hide();
          }
          this.getDeviceListDetailByDep();
        }
      );
    },
    getDeviceListByDep(item) {
      if (this.$vux) {
        this.$vux.loading.show();
      }
      DeviceDao.getDeviceListByDep(
        {
          pageNum: this.childPageNum,
          pageSize: this.childPageSize,
          runStatus: this.runStatus,
          departmentId: item.departmentId || this.curDepartment.id
        },
        res => {
          if (this.$vux) {
            this.$vux.loading.hide();
          }
          if (this.isLastLevel) {
            if (this.childPageNum === 1) {
              this.tableData.splice(0);
            }
            if (res.content && res.content.length) {
              this.tableData.push(...res.content);
            }
            this.showMore =
              res.totalPages && this.childPageNum !== res.totalPages;
          } else {
            if (
              !this.tableData[this.showIndex].partList ||
              this.childPageNum === 1
            ) {
              this.$set(
                this.tableData[this.showIndex],
                "partList",
                res.content
              );
            } else {
              this.tableData[this.showIndex].partList.push(...res.content);
            }
            this.showDeviceMore =
              res.totalPages && this.childPageNum !== res.totalPages;
          }
        }
      );
    },
    getDeviceListDetailByDep() {
      DeviceDao.getDeviceListDetailByDep(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          runStatus: this.runStatus,
          departmentId: this.curDepartment.id
        },
        res => {
          if (this.isLastLevel && this.pageNum == 1) {
            this.tableData.splice(0);
          }
          if (res && res.content) {
            this.tableData.push(...res.content);
          }
          this.showMore = res.totalPages && this.pageNum !== res.totalPages;
          if (this.$vux) {
            this.$vux.loading.hide();
          }
        }
      );
    },
    getDeviceNum() {
      let params = {
        orgId: this.user.org.id,
        departmentId: this.curDepartment.id
      };

      DeviceDao.getDeviceNum(params, res => {
        let deviceInfo = res.deviceStatistics;
        deviceInfo.forEach(element => {
          this.tabNav.forEach((ele, i) => {
            if (element.runStatus === ele.key) {
              this.$set(this.tabNav[i], "num", element.deviceNum);
            }
          });
        });
        // runStatus:1、无  2、运转 3、停止 4、异常 5、模块异常
        if (res) {
          let deviceNum = deviceInfo.reduce(
            (prev, curr) => prev + curr.deviceNum,
            0
          );

          let followNum = 0;
          deviceInfo.forEach(item => {
            if (item.runStatus == 0) {
              followNum = item.deviceNum;
            }
          })
          this.tabNav[this.tabNav.length - 1].num = deviceNum - followNum;

          let radio = 0;

          if (deviceNum == 0) {
            radio = 0;
          } else {
            radio = parseInt(
              (parseInt(deviceInfo[1].deviceNum) / deviceNum) * 100
            );
          }
          this.$emit("drawLine", deviceInfo, radio);
        }
      });
    },
    treeFind(tree, func) {
      for (const data of tree) {
        if (func(data)) return data;
        if (data.children && data.children.length) {
          const res = this.treeFind(data.children, func);
          if (res) return res;
        }
      }
      return null;
    },
    eventpartListShow(item, index) {
      if (this.showIndex !== index || !this.show) {
        this.show = true;
      } else {
        this.show = false;
      }
      this.childPageNum = 1;
      this.showIndex = index;
      if (this.show) {
        this.getDeviceListByDep(item);
      }
    },
    eventNext(item) {
      this.showMore = false;
      this.showDeviceMore = false;
      if (this.isLastLevel || item.deviceId) {
        this.eventChlid(item);
      } else {
        // this.$refs.depTree.change(item.departmentId, item.departmentName);
        if (item.departmentId && item.departmentName) {
          this.$emit("eventOpenNext", item);
        }
      }
    },
    eventChlid(item) {
      this.$router.push({
        name: "deviceInfos",
        query: {
          deviceId: item.deviceId
        }
      });
    },
    eventAdd() {
      this.$router.push({
        name: "outboundAdd"
      });
    },
    eventDetail(item) {
      //   this.store.id = id;
      // this.$store.commit("setoutboundDetails", {});
      this.show = false;
      this.$router.push({
        name: "outboundDetail",
        query: {
          id: item.id
        }
      });
    },
    reset() {
      this.curDepartment.id = "";
      this.curDepartment.departmentName = "全企业";
    }
  }
};
</script>
<style lang="less">
.device-manege-tab {
  background: #292a4d;
  &.vux-tab-wrap {
    padding-top: 50px !important;
  }
  .vux-tab-container {
    height: 50px !important;
  }
  .vux-tab {
    height: 50px !important;
    background: #292a4d !important;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
  .tab-item {
    display: flex;
    flex-direction: column;
    line-height: 1;

    span {
      margin-top: 5px;
      &:nth-child(1) {
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.outbound {
  height: 100vh;
  background: #1b1c32;
  position: relative;
  &.show-more-open {
    overflow: hidden;
  }

  .outbound-work {
    background: #1b1c32;
    .outbound-work-wrapper {
      padding: 8px 16px 50px;
      overflow: auto;
      .desc_box {
        padding: 8px;
        height: auto;
        min-height: 80px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        background: #292a4d;
        border-radius: 5px;
        margin-bottom: 12px;
        .ellipsis {
          display: inherit !important;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .item_title {
          font-size: 17px;
          color: #fff;
          // overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 6px 0;
          .title-label {
            margin-left: -8px;
            border-radius: 20px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            font-size: 14px;
            padding: 0 12px 1px 8px;
            background-color: #456de6;
            margin-right: 8px;
          }
          .title-text {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            margin-right: 8px;
            flex: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
          }
          .title-tip {
            margin-right: 8px;
            font-size: 14px;
            flex: none;
            // color: #dd9710;
            &.status {
              color: #456de6;
            }
            &.status1,
            &.status4 {
              color: #4fa8e7;
            }
            &.status3 {
              color: #456de6;
            }
            &.status5 {
              color: #dd9710;
            }
            &.status9,
            &.status7 {
              color: #dd9710;
            }
          }
        }
        .item-body {
          color: rgba(255, 255, 255, 0.6);
          font-size: 16px;
          margin: 6px 0;
          display: flex;
          justify-content: space-between;
          > span {
            flex: 1;
          }
          .item-body-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
          }
          .item-show {
            color: #fff;
            font-size: 14px;
            width: 52px;
            padding: 1px 0;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 80px;
            border: 1px solid #456de6;
          }
        }
        .item-chlid {
          border-top: 1px solid rgba(255, 255, 255, 0.5);
          padding-top: 15px;
          padding-bottom: 6px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
          .child-title {
            color: #fff;
            font-size: 16px;
            display: flex;
            align-items: center;
            .child-title-text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: keep-all;
            }

            .child-label {
              font-size: 14px;
              margin-right: 8px;
              padding: 0 6px 1px;
              color: #fff;
              border: 1px solid #456de6;
              border-radius: 2px;
              flex: none;
            }
            .child-tip {
              width: 100%;
              margin-right: 8px;
              font-size: 14px;
              &.status {
                color: #dd9710;
              }
              &.status {
                color: #456de6;
              }
              &.status1,
              &.status4 {
                color: #4fa8e7;
              }
              &.status3 {
                color: #456de6;
              }
              &.status5 {
                color: #dd9710;
              }
              &.status9,
              &.status7 {
                color: #dd9710;
              }
            }
          }

          .child-body {
            font-size: 14px;
            margin: 8px 0;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            .child-body-text {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .child-body-state {
              margin-left: 8px;
              padding: 0 2px 1px;
              color: #456de6;
              border: 1px solid #456de6;
              border-radius: 2px;
            }
            // span {
            //   margin-left: 4px;
            // }
            &.handle {
              justify-content: space-between;
              // color: #fff;
            }
          }
          .handle-btn {
            margin-left: 8px;
            flex: none;
          }
          .btn {
            color: #fff;
            font-size: 14px;
            background-color: #456de6;
            padding: 2px 11px 3px;
            border-radius: 12px;
          }
        }
        .item-status {
          display: flex;
        }
        .device-status {
          position: relative;
          color: rgba(255, 255, 255, 0.6);
          display: flex;
          align-items: center;
          .device-tag {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: #fff;
            margin-right: 4px;
            margin-left: 4px;
            &.status1 {
              background-color: gray;
            }
            &.status2 {
              background-color: #456de5;
            }
            &.status3 {
              background-color: #dc9610;
            }
            &.status4 {
              background-color: #dd6031;
            }
            &.status5 {
              background-color: #d2d2d2;
            }
          }
        }
        .newpage_work_more {
          height: 40px;
          font-size: 12px;
          line-height: 40px;
          text-align: center;
          color: #456de6;
        }
      }

      .newpage_work_more {
        height: 40px;
        font-size: 12px;
        line-height: 40px;
        text-align: center;
        color: #456de6;
      }
    }
  }
}

.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
</style>
<style>
.title-text .vux-x-icon {
  fill: #FFFFFF;
}
.child-title .vux-x-icon {
  fill: #FFFFFF;
}
</style>
